<!doctype html>
<html lang="en">
  <head>
    <title>林科大校医</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="style.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <!-- 左边菜单栏 -->
    <div class="navigation">

        <ul>
            <li class="list active">
                <b></b>
                <b></b>
                <a href="index.html">
                    <span class="icon">
                        <ion-icon name="home-outline"></ion-icon>
                    </span>
                    <span class="title">科室导航</span>
                </a>
            </li>
            <li class="list">
                <b></b>
                <b></b>
                <a href="departscheduling.html">
                    <span class="icon">
                        <ion-icon name="calendar-outline"></ion-icon>
                    </span>
                    <span class="title">排班</span>
                </a>
            </li>
    
            <li class="list">
                <b></b>
                <b></b>
                <a href="reservationinfo.html">
                    <span class="icon">
                        <ion-icon name="person-circle-outline"></ion-icon>
                    </span>
                    <span class="title">我的预约信息</span>
                </a>
            </li>
            <li class="list">
                <b></b>
                <b></b>
                <a href="RankingList.html">
                    <span class="icon">
                        <ion-icon name="thumbs-up-outline"></ion-icon>
                    </span>
                    <span class="title">点赞排行榜</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="toggle">
        <ion-icon name="menu-outline" class="open"></ion-icon>
        <ion-icon name="close-outline" class="close"></ion-icon>
    </div>
    
    
    
    
    <div id="app">
        <!-- 导航栏 -->
                 <nav class="navbar navbar-expand-md  navbar-dark" style="background-color: rgb(255, 55, 55);"  id="daohang">
                <a class="navbar-brand" href="#">林科大校医 🏥 </a>
                <div class="collapse navbar-collapse" id="collapsibleNavId">
                    <!-- 在这个导航栏中定义每一个选项 -->
                    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                        <!-- 一个选项就是一个li标签 -->
                        <li class="nav-item active ml-3">
                            <a class="nav-link" href="#"><span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item ml-3">
                            <a class="nav-link" href="#"></a>
                        </li>
                    
                    </ul>
                    <p class="userName">用户名:{{userName}}</p>
                </div>
            </nav>
        

     <!--预约---确定就诊人  -->
      <div class="container" >
         <div class="row">
            <table class="table offset-3 col-md-4">
                <tbody v-if="schedul!=null">
                    <tr>
                        <td>医生</td>
                        <td>{{schedul.doctor.name}}</td>
                    </tr>
                    <tr>
                        <td>时间</td>
                        <td>{{schedul.time}}</td>
                    </tr>
                   <tr>
                        <td>叫号顺序</td>
                        <td>{{schedul.count+1}}</td>
                    </tr>
                    <tr>
                        <td>就诊人</td>
                        <td>
                            <!-- 拿到data中的patient数据 -->
                            <div>{{user.name}}  {{user.idCard}}
                            </div>
                            
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <a @click="addAppoint()" class="btn btn-danger btn-block">确定预约</a>
                        </td>
                    </tr>
                </tbody>
            </table>
         </div>
      </div>
    </div>
    

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
  </body>
</html>
<script>
    var url = `http://localhost:8080`;
    new Vue({
        el:"#app",
        data() {
            return {
                schedul:null,
                patient:null,
                user:[],
                userName:"",
            }
        },
        mounted() {
           this.schedul = JSON.parse(sessionStorage.getItem("schedul"));
           this.getUser();
           this.userName=JSON.parse(sessionStorage.getItem("user")).name;
        },
        methods: {
            getUser(){
                this.user =JSON.parse(sessionStorage.getItem("user"));
            },
            addAppoint(){
                //需要一个预约对象存到数据库,构建一个预约需要存储的对象
                /**
                 * Post或者是put传递参数的操作
                 *  1.先构建对象
                 *  2. axios.post(url,对象).then().error();
                 *  3.将对象作为参数  @RequestBody -将前端的json对象数据转成为java对象
                 */ 
                let appoint = {
                    doctor: this.schedul.doctor,
                    patient:this.user,
                    clinic:this.schedul.clinic,
                    time:this.schedul.time,
                    num: this.schedul.count+1               
                }
                axios.post(`${url}/appoint/${this.schedul.id}`,appoint)
                .then(function (response) {
                    if(response.data){
                        sessionStorage.setItem("appoint",JSON.stringify(appoint));
                    }else{
                        alert("预约失败！")
                        location.href ="index.html";
                    }
                })
                .catch(function (error) {
                });

                axios.post(`${url}/patient`,this.user)
                .then(function (response) {
                    if(response.data){
                        alert("预约成功！现在跳转到预约信息页面查看！！");
                        location.href="reservationinfo.html"
                    }else{
                    }
                })
                .catch(function (error) {
                })
            }

        },
    })
</script>
<script>
    //添加动作
    let menuToggle = document.querySelector('.toggle');
    let navigation = document.querySelector('.navigation')
    menuToggle.onclick = function () {
        menuToggle.classList.toggle('active');
        navigation.classList.toggle('active');
    }
    //点击
    let list = document.querySelectorAll('.list');
    for (let i = 0; i < list.length; i++) {
        list[i].onclick = function () {
            let j = 0;
            while (j < list.length) {
                list[j++].className = 'list'
            }
            list[i].className = 'list active';
        }
    }
</script>

<style>
    .row{
        padding-top: 200px;
        padding-left: 100px;
        
    }
</style>